<template>
  <el-dialog 
    :visible="isShowDialog" 
    width="40%" 
    :title="isShowId ? '编辑模板' : '添加模板' " 
    class="dialog__header"  
    close-on-press-escape
    @close="$emit('update:isShowDialog', false)"
  >
   
    <el-form ref="formData" :model="formData" label-width="15%">
      <el-form-item label="模板类型">
        <el-select 
          v-model="formData.templateType"
          placeholder="请选择模板类型"
          class="inputWidth"
          @change="selectC"
        >
          <el-option label="同城" :value="1"></el-option>
          <el-option label="省内" :value="2"></el-option>
          <el-option label="经济区互寄" :value="3"></el-option>
          <el-option label="跨省" :value="4"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="运输类型">
        <el-select 
          v-model="formData.transportType" 
          placeholder="请选择运输类型"
          class="inputWidth"
        >
          <el-option label="普快" value="1"></el-option>
          <el-option label="特快" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="关联城市"  v-if="formData.templateType === 3" >
        <el-radio-group 
          v-model="formData.associateCityList"
          @input="hChange"
        >
          <!-- ref="templateType" -->
          <el-radio :label="2">京津冀</el-radio>
          <el-radio :label="3">江浙沪</el-radio>
          <el-radio :label="4">川渝</el-radio>
          <el-radio :label="5">黑吉辽</el-radio>
        </el-radio-group>
        <!-- </template>   -->
      </el-form-item>
      <el-form-item label="关联城市" ref="templateType"  v-else>
        <el-input 
          disabled 
          placeholder="全国"
          v-model="formData.associatedCityList" 
        >
        </el-input>
      </el-form-item>

      <el-form-item label="首重价格" class="el-firstWeight">
        <span class="el-form-yen">元</span>
        <el-input v-model="formData.firstWeight" placeholder="请输入首重价格"></el-input>
      </el-form-item>

      <el-form-item label="续重价格" class="el-continuousWeight">
        <span class="el-form-yen">元</span>
        <el-input v-model="formData.continuousWeight" placeholder="请输入续重价格"></el-input>
      </el-form-item>

      <el-form-item label="轻抛系数">
        <el-input 
          v-model="formData.lightThrowingCoefficient" placeholder="请输入轻抛系数"
        ></el-input>
      </el-form-item>

      <el-row class="button-box">
        <el-button class="affirm" @click="upCarriages">确认</el-button>
        <el-button class="cancel" @click="$emit('update:isShowDialog', false)">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { updataCarriages } from '@/api/essential'
export default {
  name: 'IacPage',
  props: {
    isShowDialog: {
      type: Boolean,
      required: true
    },
    isShowId: {
      type: [ Number,String ],
      required: true
    }
  },
  data() {
    return {
      formData: {
        id: new Date().getTime (),
        associatedCityList: '',// 关联城市
        continuousWeight: '', // 续重价格
        firstWeight: '', // 首重价格
        lightThrowingCoefficient: '', // 轻抛系数
        templateType: '', // 模板类型
        transportType: '', // 运输类型
      }
    }
  },
  methods: {
    // 关联城市
    // isShow() {
      //   this.$emit('isShow', false)
    // }
     upCarriages() {
       this.$refs.formData.validate(valid => {
         if (valid) {
           this.addForm()
         }
      })
    },
    hChange(value){
      console.log(value, 'hChange')
      this.$set(this.formData, 'associatedCityList', [value])
      // console.log(this.formData) 
      // console.log(this.formData.templateType)
    },
    selectC(value) {
      if (value !== 3) {
        this.formData.associatedCityList = []
        console.log(value, 'selectC')
      }
    },
    async addForm() {

      const res = await updataCarriages(this.formData)
      // console.log(res) 
      // this.$message.success('添加成功')
      this.$emit('updatecarriages')
      this.$emit('update:isShowDialog', false)
      // this.formData = {
      //   id: new Date().getTime (),
      //   associatedCityList: [],// 关联城市
      //   continuousWeight: '', // 续重价格
      //   firstWeight: '', // 首重价格
      //   lightThrowingCoefficient: '', // 轻抛系数
      //   templateType: '', // 模板类型
      //   transportType: '', // 运输类型
      // }
        this.$refs.formData.resetFields()
    }
    // removeList() {

    // }
  }

}
</script>

<style lang="scss" scoped>

  .el-dialog__header {
    background-color: #f3f4f7;
    padding: 20px 40px 10px !important;
  }

  .el-form {
    padding: 0 20px !important;
  }

  .inputWidth {
    width: 100%;
  }

  .el-firstWeight,
  .el-continuousWeight {
    position: relative;
    .el-form-yen{
      position: absolute;
      right: 0;
      z-index: 99;
      color: rgb(32, 35, 42);
      font-weight: 400;
      font-size: 14px;
      margin-right: 14px;
    }
  }

  .button-box {
    text-align: center;
    .affirm {
      width: 90px;
      background-color: #e15536;
      color: #fff;
    }
    .cancel {
      width: 90px;
      color: #000
    }
  }
  
  
</style>
